<template>
  <div>
    <div>
      <div class="border">
        <span> 0.axios网络</span>
        <p>{{httpResponse}}</p>
        <button @click="openAxios(1)">axios调用</button>
        <button @click="openAxios(0)">隐藏</button>

      </div>


      <div class="border">
        <span> 1.对话框</span>
        <button @click="openDialog">打开弹框</button>
        <button @click="closeDialog">关闭弹框</button>
        <a href="http://www.baidu.com">百度</a>
      </div>

      <!-- //:config="config" :beforeClose="beforeClose" @close="resetForm" -->

      <div class="border">
        <span> 2.对话框</span>
        <div class="parent  temp2">
          父亲
          <div class="son">儿子</div>
        </div>
      </div>

      <div class="border">
        <span> 3. vuex学习使用</span>
        <div>
          <p>访问根模块counter-$store.state.counter= {{this.$store.state.counter}}</p>
          <p>访问A模块counter-$store.state.a.counter= {{this.$store.state.a.counter}}</p>
          <p>访问B模块counter-$store.state.b.counter= {{this.$store.state.b.counter}}</p>
          <div >
            同步修改根模块counter:
            <button @click="stateChange(2)">同步修改根模块counter </button>
          </div>
          <div >
            同步修改A模块counter:
            <button @click="stateChange(3)">同步修改A模块counter </button>
          </div>
          <div >
            同步修改B模块counter:
            <button @click="stateChange(4)">同步修改B模块counter </button>
          </div>

          <div >
            异步修改根模块counter:
            <button @click="stateChange(5)">异步修改根模块counter</button>
          </div>
          <div >
            异步修改A模块counter:
            <button @click="stateChange(6)">异步修改A模块counter</button>
          </div>

          <div >
            访问根模块getters  : {{ this.$store.getters.addCounter }} 
           
            <button @click="stateChange(7)">访问根模块getters</button>
          </div>
          <div > 
            访问A模块getters: {{ $store.getters.doubuleCounter }} 
            <button @click="stateChange(8)">访问A模块getters</button>
          </div>

          <div > 
            mapState
            <button @click="stateChange(10)">mapState</button>
          </div>


          <div>
          </div>
          <button @click="stateChange(100)">打开新窗口查看state变化</button>
        </div>
      </div>

      <div class="border">
        <span> 4. 登录 登出功能</span>

        <div v-if="isNotLogin">
            <div>
              <span>用户名:</span>
              <div style="display: inline-block;">
                <input v-model="userName" type="text">
              </div>
            </div>
            <div>
              <span>密码:</span>
              <div style="display: inline-block;">
                <input v-model="password" type="text">
              </div>
            </div>
            <button @click="login">登录</button>
        </div>
        <div v-else>
          <div>{{userName}}</div>
         <button @click="logout">退登</button>
       </div>
      </div>
      
      <div class="border">
        <span> 6.环境检测</span>
        <div class="">
           当前环境:   {{environment}} 
           baseurl:   {{baseurl}} 
        </div>
        <button @click="getEnvironment()">获取</button>

      </div>

      <MyDialog ref="dialog">
        <div ref="span">this is a dialog2</div>
      </MyDialog>
    </div>

  </div>
</template>

<script>
  import { Layout } from 'element-ui';
  import MyDialog from '@/components/MyDialog'
  import {mapState, mapActions, mapGetters } from 'vuex'
  import API from '@/network/API'
  import axios from 'axios'
 
  //import state from  '@store/index'

  export default {
    components: {
      MyDialog
    },

    data() {
      return {
        number: 1,
        value: 10,
        userName:'',
        password:'',
        isNotLogin: true,
        userInfo:{
          name: '',
          password: '',
          token:'',
          userId:''
        },
        httpResponse:'',
        environment:'',
        baseurl:''
      }
    }, 
    created() {
      

    },
  
    computed: {
      //映射
      ...mapState({
        userFullName(state){
         return  "张" + state.userName; 
       },
      }),

      
      getValue(){//普通compute
           return 1;
      }
      //相当于
      // counter(){
      //   console.log('counter..');
      //   return this.$store.state.counter;
      // }
    },

    // computed:mapState({
    //     userFullName(state){
    //       return  "张" + state.userName; 
    //     }
    // }),

    methods: {
      ...mapActions(['increaseAction', 'decrementAction']),
      /*
      mapActiono相当于
      addA(n) {
        this.$store.dispatch('increaseAction', n)
      },
      addB(n) {
        this.$store.dispatch('decrementAction', n)
      },*/

      //vuex 操作
      stateChange(value){
        if(value == 1){
            console.log("state: " + JSON.stringify(this.$store.state));
            console.log("state a: " + JSON.stringify(this.$store.state.a));
        }else if(value == 2){
           this.$store.commit('increase');
        }else if(value == 3){
           this.$store.commit('a/increase');
        }else if(value == 4){
           this.$store.commit('b/increase');
        }else if(value == 5){
           this.$store.dispatch('increaseAction');
        }else if(value == 6){
           this.$store.dispatch('a/increaseAction');
        }
        else if(value == 7){
         console.log("doubuleCounter: " +  this.$store.getters.doubleCounter );
        }else if(value == 8){
          console.log("getters: " +  JSON.stringify(this.$store.getters) );
          console.log("doubuleCounter: " +  this.$store.getters['a/doubleCounter'] );
        }else if(value == 10){
          this.$store.state.userName = '翠山'
          console.log("counter: " +  this.userFullName);
         
         }
      },

      ////
      closeDialog() {
        this.$refs.dialog.close();
      },

      //测试方法 millisecond
      testNeedWait(millisecond) {
        return new Promise((resolve, reject) => {
          //处理数据
          let ret = 0;
          if (ret == 1) {
            resolve('成功');
          } else {
            reject('失败');
          }
          // setTimeout(resolve,millisecond)
        })
      },

      testSleep(ms) {
        return new Promise(function (resolve, reject) {
          setTimeout(resolve, ms);
        })
      },
      async handle(callback) {

        await this.testSleep(1000)
        callback();
      },

      openDialog() {
        //console.log('openDialog...')
        this.$refs.dialog.open(cancel => {
          console.log('点击打开按钮 开始: ');

          this.handle(() => {
            cancel();//主动关闭弹框
          });

          // this.testNeedWait(1000).then((scuess) => {
          //   console.log("time finished: " + result);
          //   cancel();//主动关闭弹框
          // }, (faile) => {
          //   console.log("time finished faile: " + faile);
          // });


          console.log('点击打开按钮 结束: ');
        }).then(() => {
          //dom更新后
          console.log('openDialog then... ');
          //console.log(this.$refs.span);
        });

        // this.$refs.dialog.open(cancel => {
        //   // cancel();
        //   console.log('点击提交按钮了')
        // })
        // .then(() => {
        //   console.log('openDialog then...');
        //   console.log(this.$refs.span);
        // });   //这里就充分利用了open方法中返回的nextTick
      },
      login(){
          console.log(this.userName + ',' + this.password);
          console.log('get userinfo  ' + JSON.stringify(this.$store.getters.userInfo));
          if(this.$store.getters.userInfo.userName){
            this.userName = this.$store.getters.userInfo.userName;
          }
          let  that = this;
          //模拟登录
          setTimeout(() => {
              var user = {
                token:'ABDFKGLDK123456GG',
                userId:'SDGGGGGGGSDD',
                isLogin:true,
                userName: that.userName
              }
 
            //  this.$store.state.user =  user;
           // console.log(JSON.stringify(this.$store.state.user ));

              if(user.isLogin){
                  that.isNotLogin = false;
                  //保存起来
                  this.$store.dispatch('setUserInfo',user);
                  //sessionStorage.setItem('sessionStorage——KEYs','sessionStorage');
              }
          },2000);
      },
      logout(){
        console.log("logout...");
        this.$store.state.user = null;
        this.isNotLogin = true;
      },
      openAxios(state){
        if(state == 0){
          this.httpResponse = null;
          return;
        }
        //1. get 
        let url =  'http://v.juhe.cn/toutiao/index?type=&page=&page_size=&is_filter=&key=06bba94a7c13790fe0a83ad9a24589e0';
       url = 'toutiao/index?key=06bba94a7c13790fe0a83ad9a24589e0';
        axios.get(url).then((response) => {
          
          this.httpResponse = JSON.stringify(response.data)
         
        }).catch ((error) => {
          console.log("error: " + error);
        });
      },
      getEnvironment(){
         this.environment = process.env.NODE_ENV;
         console.log(JSON.stringify(process.env));
        
         //console.log(process.env.$baseUrl);
        this.baseurl =  process.env.BASE_URL;
         
      }



      // beforeClose(){
      //   console.log('beforeClose...')
      // },
      // resetForm(){
      //   console.log('resetForm...')
      // }
    }
  }
</script>

<style scoped>
  .parent.temp {
    width: 150px;
    height: 250px;
    background-color: #d3dce6;
    font-size: 30px;
    color: chocolate;
  }

  .border {
    margin-bottom: 20px;
    border: #99a9bf solid 1px;
    margin-left: 20px;
    padding: 10px;
  }

  .son {
    width: 100px;
    height: 30px;
    margin-left: 20px;
    background-color: aqua;
  }

  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    background: #000;
  }

  .el-col {
    border-radius: 4px;

  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>